<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>红灯笼商家中心</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
        }

        .header {
            background-color: #FFD700;
            padding: 1rem;
            text-align: center;
            font-size: 1.5rem;
            font-weight: bold;
        }

        .main-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
            text-align: center;
        }

        .title {
            font-size: 1.8rem;
            color: #333;
            margin: 3rem 0;
        }

        .categories {
            display: flex;
            justify-content: center;
            gap: 2rem;
            flex-wrap: wrap;
            margin-top: 3rem;
        }

        .category {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 200px;
            text-decoration: none;
            color: #333;
        }

        .icon-circle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
            transition: transform 0.2s;
        }

        .category:hover .icon-circle {
            transform: scale(1.1);
        }

        .food { background-color: #FFA500; }
        .takeaway { background-color: #FFD700; }
        .hotel { background-color: #B19CD9; }
        .tourism { background-color: #87CEEB; }
        .general { background-color: #FFD700; }

        .category-name {
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
            font-weight: bold;
        }

        .category-desc {
            font-size: 0.9rem;
            color: #666;
            text-align: center;
            line-height: 1.4;
        }

        .footer {
            text-align: center;
            padding: 2rem;
            color: #666;
            font-size: 0.9rem;
        }

        .footer-links {
            margin-bottom: 1rem;
        }

        .footer-links a {
            color: #FF6B00;
            text-decoration: none;
            margin: 0 1rem;
        }

        .footer-links a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<header class="header">
    红灯笼商家中心<a href="login.jsp" style="float: right;color: #2D3139;text-decoration: none">登录</a>
</header>

<main class="main-content">
    <h1 class="title">请选择您的合作行业</h1>

    <div class="categories">
        <a href="#" class="category">
            <div class="icon-circle food">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="white">
                    <path d="M8.1 13.34l2.83-2.83L3.91 3.5c-1.56 1.56-1.56 4.09 0 5.66l4.19 4.18zm6.78-1.81c1.53.71 3.68.21 5.27-1.38 1.91-1.91 2.28-4.65.81-6.12-1.46-1.46-4.2-1.1-6.12.81-1.59 1.59-2.09 3.74-1.38 5.27L3.7 19.87l1.41 1.41L12 14.41l6.88 6.88 1.41-1.41L13.41 13l1.47-1.47z"/>
                </svg>
            </div>
            <div class="category-name">美食</div>
            <div class="category-desc">海量流量、精准营销、深度分析，助力您的餐厅销量口碑都双丰收</div>
        </a>

        <a href="#" class="category">
            <div class="icon-circle takeaway">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="white">
                    <path d="M19 7c0-1.1-.9-2-2-2h-3v2h3v2.65L13.52 14H10V9H6c-2.21 0-4 1.79-4 4v3h2c0 1.66 1.34 3 3 3s3-1.34 3-3h4.48L19 10.35V7zM7 17c-.55 0-1-.45-1-1h2c0 .55-.45 1-1 1z"/>
                </svg>
            </div>
            <div class="category-name">外卖</div>
            <div class="category-desc">红灯笼外卖让您跟消费者沟通更便捷、经营更轻松、药品类商家入驻</div>
        </a>

        <a href="#" class="category">
            <div class="icon-circle hotel">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="white">
                    <path d="M17 11V3H7v4H3v14h18V11h-4zm-6-6h4v14h-4V5z"/>
                </svg>
            </div>
            <div class="category-name">酒店</div>
            <div class="category-desc">新美大欢迎您，轻松助力酒店实现销售、口碑双增长</div>
        </a>

        <a href="#" class="category">
            <div class="icon-circle tourism">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="white">
                    <path d="M17 12h2L12 2 5.05 12H7l-3.9 6h6.92v4h3.95v-4H21z"/>
                </svg>
            </div>
            <div class="category-name">境内旅游</div>
            <div class="category-desc">海量流量、精准营销、深度分析，美团旅游度假助您实现量大、名利双收</div>
        </a>

        <a href="#" class="category">
            <div class="icon-circle general">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="white">
                    <path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
                </svg>
            </div>
            <div class="category-name">综合商家</div>
            <div class="category-desc">休闲娱乐、丽人、亲子、教育、KTV、家装等商家</div>
        </a>
    </div>
</main>

<footer class="footer">
    <div class="footer-links">
        <a href="concerning.jsp">关于红灯笼</a>
        <a href="concerning.jsp">帮助中心</a>
    </div>
    <div class="copyright">
        © <%= new java.text.SimpleDateFormat("yyyy").format(new java.util.Date()) %> meituan.com京ICP证070791号
    </div>
</footer>
</body>
</html>